<template>
  <div>
    <div id='chart'></div>
  </div>
</template>

<script>
export default {
  name: 'chart2',
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let chart = this.$echarts.init(document.getElementById('chart'))

      const option = {
        backgroundColor: 'rgba(255, 255, 255, 1)',
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['ta', 'te', 'tc']
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 20
          },
          splitLine: {
            lineStyle: {
              type: 'dashed'
            },
            show: true
          },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          show: false,
          splitLine: {
            lineStyle: {
              type: 'dashed'
            },
            show: true
          }
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          stack: 'one',
          itemStyle: {
            borderWidth: 10,
            borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#2FCAFD'
              },
              {
                offset: 1,
                color: '#2450F0'
              }
            ]),
            barBorderRadius: 120
          },

          emphasis: {
            itemStyle: {
              borderColor: 'rgba(255, 255, 255, 1)'
            }
          }
        },
          {
            data: [120, 30, 150, 80, 70, 110, 130],
            type: 'bar',
            stack: 'one', //堆叠
            barWidth: 40,
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#FFE131'
              },
              {
                offset: 1,
                color: '#FFB200'
              }
            ]),
            itemStyle: {
              borderWidth: 10, //用border设置两个柱形图之间的间距
              borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
              barBorderRadius: 120
            },
            emphasis: {
              itemStyle: {
                borderColor: 'rgba(255, 255, 255, 1)'
              }
            }

          },
          {
            data: [120, 30, 150, 80, 70, 110, 130],
            type: 'bar',
            stack: 'one', //堆叠
            barWidth: 40,
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#6DFF6D'
              },
              {
                offset: 1,
                color: '#00DB00'
              }
            ]),
            itemStyle: {
              borderWidth: 10, //用border设置两个柱形图之间的间距
              borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
              barBorderRadius: 120
            },
            emphasis: {
              itemStyle: {
                borderColor: 'rgba(255, 255, 255, 1)'
              }
            }

          }
        ]
      }
      chart.setOption(option)
    }
  }
}
</script>

<style scoped>
#chart {
  width: 100%;
  height: 460px;
  margin: 0 auto
}

</style>